<template>
  <div class="assistant-container">
    <el-row :gutter="20" class="main-row">
      <el-col :span="4" :xs="24" :sm="6" :md="4" class="sidebar-col">
        <ContentWrap class="side-item-list">
          <div
            v-for="(item, index) in leftSides"
            :key="index"
            :class="leftMenu == item.id ? 'side-item-select' : 'side-item-default'"
            class="side-item"
            @click="sideClick(item)"
          >
            <div class="side-name">
              {{ item.name }}
            </div>

            <el-popover placement="right" trigger="click">
              <template #reference>
                <el-icon :class="item.id == '' ? 'sider-icon-no' : 'sider-icon'"
                  ><MoreFilled
                /></el-icon>
              </template>
              <template #default>
                <div class="popover-content">
                  <el-button link @click="setChangeTag('update', item)">编辑</el-button>
                  <el-button link @click="deleteSider(item)">删除</el-button>
                </div>
              </template>
            </el-popover>
          </div>
        </ContentWrap>
      </el-col>
      <el-col :span="20" :xs="24" :sm="18" :md="20" class="content-col">
        <ContentWrap class="content-wrap">
          <AssistantTable
            ref="assistantTable"
            @set-change-tag="setChangeTag"
            @show-coumer="showCoumer"
            :simpleOption="simpleOption"
            :ownerUserOption="ownerUserOption"
            :sceneOption="sceneOption"
            :leftSides="leftSides"
            @side-rresh="sideRresh"
          />
        </ContentWrap>
      </el-col>
    </el-row>
  </div>

  <!-- 添加和编辑标签 -->
  <TagSet ref="tagDiag" @customer-service-list="customerServiceList" />
  <!-- 添加客服 -->
  <AddCustomer
    ref="customerDiag"
    :leftSides="leftSides"
    :simpleOption="simpleOption"
    :ownerUserOption="ownerUserOption"
    :sceneOption="sceneOption"
    @side-rresh="sideRresh"
    :introOption="introOption"
  />
</template>

<script lang="ts" setup>
import AssistantTable from './components/assistantTable.vue'
import { MoreFilled } from '@element-plus/icons-vue'
import TagSet from './components/tagSet.vue'
import AddCustomer from './components/addCustomer.vue'
import * as UserApi from '@/api/system/user'
import * as SceneApi from '@/api/service/scene/index'
import * as Assistant from '@/api/service/assistant/index'

const tagDiag = ref(null)
const customerDiag = ref(null)
const leftMenu = ref('')
const assistantTable = ref(null)
const leftSides = ref([])
const simpleOption = ref([])
const introOption = ref([])
const ownerUserOption = ref([])
const sceneOption = ref([])

/* 删除标签 */
const deleteSider = (val) => {
  ElMessageBox.confirm('确定要删除当前分组吗?<br/>删除分组后将无法恢复，请谨慎操作！', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    dangerouslyUseHTMLString: true
  })
    .then(async () => {
      const data = await Assistant.deleteAssistantGroup(val.id)
      if (data) ElMessage.success('删除成功')
      customerServiceList()
    })
    .catch(() => {})
}

/*标签*/
const setChangeTag = (type, val) => {
  tagDiag.value.open(type, val)
}

/*添加/编辑 客服*/
const showCoumer = (type, val) => {
  customerDiag.value.open(type, val)
}

/** 侧边点击 */
const sideClick = (item: any) => {
  leftMenu.value = item.id
  assistantTable.value.groupGetList(item.id)
}
// 刷新
const sideRresh = () => {
  assistantTable.value.groupGetList(leftMenu.value)
}
/** 初始化 */
onMounted(async () => {
  customerServiceList()
  simplelist()
  ownerUser()
  getSceneOption()
  customerSimlelist()
})

// 客服分组列表
const customerServiceList = async () => {
  const data = await Assistant.getAssistantSimpleList()
  data.unshift({
    name: '全部',
    id: ''
  })
  leftSides.value = data
}
/*获取欢迎语配置*/
const simplelist = async () => {
  const data = await Assistant.welcomeSimpleList()
  simpleOption.value = data
}
/*获取客服简介*/
const customerSimlelist = async () => {
  const data = await Assistant.introConfigSimpleList()
  introOption.value = data
}
/*获取所属员工*/
const ownerUser = async () => {
  ownerUserOption.value = await UserApi.getSimpleUserList()
}
/* 获取场景*/
const getSceneOption = async () => {
  sceneOption.value = await SceneApi.getSceneChildPage(1)
}
</script>

<style lang="scss" scoped>
.assistant-container {
  padding: 16px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

  @media (max-width: 768px) {
    padding: 8px;
  }
}

.main-row {
  min-height: calc(100vh - 32px);

  @media (max-width: 768px) {
    min-height: calc(100vh - 16px);
  }
}

.sidebar-col {
  @media (max-width: 768px) {
    margin-bottom: 16px;
  }
}

.content-col {
  @media (max-width: 768px) {
    padding: 0 !important;
  }
}

.side-item-list {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 82, 204, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 12px 40px rgba(0, 82, 204, 0.15);
    transform: translateY(-2px);
  }

  .side-item {
    position: relative;
    height: 56px;
    padding: 0 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(0, 82, 204, 0.05);

    &:last-child {
      border-bottom: none;
    }

    @media (max-width: 768px) {
      height: 48px;
      padding: 0 16px;
    }

    .side-name {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s ease;

      @media (max-width: 768px) {
        font-size: 13px;
      }
    }

    .sider-icon-no {
      display: none;
    }

    .sider-icon {
      display: none;
      color: #0052cc;
      font-size: 16px;
      transition: all 0.3s ease;

      &:hover {
        color: #003d99;
        transform: scale(1.1);
      }
    }

    &:hover {
      background: linear-gradient(135deg, rgba(0, 82, 204, 0.08) 0%, rgba(0, 82, 204, 0.12) 100%);
      transform: translateX(4px);

      .side-name {
        color: #0052cc;
        font-weight: 600;
      }

      .sider-icon {
        display: inline-block;
      }
    }
  }
}

.side-item-default {
  color: #606266;
  background: transparent;

  &::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: all 0.3s ease;
  }
}

.side-item-select {
  color: #0052cc;
  background: linear-gradient(135deg, rgba(0, 82, 204, 0.1) 0%, rgba(0, 82, 204, 0.15) 100%);
  font-weight: 600;

  &::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
    border-radius: 2px 0 0 2px;
    box-shadow: 0 0 8px rgba(0, 82, 204, 0.3);
  }

  .side-name {
    color: #0052cc;
    font-weight: 600;
  }

  .sider-icon {
    display: inline-block;
    color: #0052cc;
  }
}

.content-wrap {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 82, 204, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 12px 40px rgba(0, 82, 204, 0.15);
  }
}

.popover-content {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding: 8px 0;

  .el-button {
    margin: 0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.1);
      color: #0052cc;
      transform: translateX(2px);
    }
  }
}

// 移动端优化
@media (max-width: 768px) {
  .assistant-container {
    .main-row {
      flex-direction: column;
    }

    .sidebar-col {
      width: 100% !important;
      flex: none !important;
    }

    .content-col {
      width: 100% !important;
      flex: none !important;
    }

    .side-item-list {
      margin-bottom: 16px;

      .side-item {
        &:hover {
          transform: none;
        }
      }
    }
  }
}

// 平板端优化
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar-col {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .content-col {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .assistant-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  }

  .side-item-list,
  .content-wrap {
    background: rgba(40, 40, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .side-item-default {
    color: #e0e0e0;
  }
}

// 动画效果
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.side-item-list,
.content-wrap {
  animation: slideIn 0.6s ease-out;
}

// 滚动条美化
:deep(.el-scrollbar__wrap) {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 82, 204, 0.3) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 82, 204, 0.3);
    border-radius: 3px;

    &:hover {
      background: rgba(0, 82, 204, 0.5);
    }
  }
}
</style>
